<template>
<div>
  <Breadcrumb :items="['系统管理', '权限与菜单管理']" />
  <a-card class="general-card" title="权限与菜单管理">
    <template #extra>
      <a-space direction="horizontal" :size="18">
        <a-button type="primary" :loading="loading" @click="refresh">
          <template #icon>
            <icon-refresh />
          </template>
          刷新
        </a-button>
      </a-space>
    </template>
    <!--分割线-->
    <a-divider direction="horizontal" />
    <a-row style="margin-bottom: 16px">
      <a-col :span="16">
        <a-space>
          <a-button type="primary" @click="openBoard(null, Operation.CREATE)">
            <template #icon>
              <icon-plus />
            </template>
            添加
          </a-button>
        </a-space>
      </a-col>
      <a-col :span="8" style="text-align: right">
        <a-space>
          <table-column-setting v-model:columns="columns" />
        </a-space>
      </a-col>
    </a-row>

      <a-table
      :columns="columns"
      :data="records"
      :loading="loading"
      row-key="id"
      :pagination="false">
      <template #icon="{record}">
        <component :is="record.meta.icon" v-if="record.meta && record.meta.icon" />
      </template>
      <template #type="{ record }">
        <a-tag v-if="record.type" color="arcoblue" :bordered="true">权限</a-tag>
        <a-tag v-else color="gray" :bordered="true">菜单</a-tag>
      </template>
      <template #cache="{ record }">
        <a-tag v-if="record.meta && record.meta.cache" color="arcoblue" bordered>开启</a-tag>
        <a-tag v-if="record.meta && !record.meta.cache" color="gray" bordered>关闭</a-tag>
      </template>
      <template #operation="{ record }">
        <a-button type="text" size="small" @click="openBoard(record.id, Operation.PREVIEW)">
          预览
        </a-button>
        <a-button type="text" size="small" @click="openBoard(record.id, Operation.UPDATE)">
          编辑
        </a-button>
        <a-popconfirm :content="`确定删除 '${record.name}' 吗?`" type="warning" @ok="doRemove(record.id)">
          <a-button type="text" size="small" status="danger">
              删除
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <authority-board ref="board" @ok="refresh"/>
  </a-card>
</div>
</template>

<script>
import useLoading from '@/hooks/loading'
import {deleteById, listTree} from '@/api/modules/system/authority'
import AuthorityBoard from "@/views/system/authority/components/authority-board.vue";
import {Operation} from "@/types/global";

const columns = [{
  title: "资源名称",
  dataIndex: "title",
  fixed: "left"
},{
  title: '图标',
  dataIndex: 'icon',
  slotName: 'icon'
}, {
  title: '资源类型',
  dataIndex: 'type',
  slotName: 'type'
},{
  title: '资源编码',
  dataIndex: 'name',
}, {
  title: '路由',
  dataIndex: 'path'
},{
  title: '缓存',
  dataIndex: 'cache',
  slotName: 'cache'
}, {
  title: "操作",
  align: "right",
  fixed: "right",
  dataIndex: "operation",
  slotName: 'operation'
}]

const { loading, setLoading } = useLoading();

export default {
  name: 'Authority',
  components: {AuthorityBoard},
  data() {
    return {
      columns,
      records: [],
      loading,
      Operation
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    async refresh() {
      setLoading(true)
      const { data } = await listTree()
      this.records = data
      setLoading(false)
    },
    openBoard(id, type) {
      this.$refs.board.open(id, type)
    },
    async doRemove(id) {
      try {
        setLoading(true)
        await deleteById(id)
        await this.refresh()
      } finally {
        setLoading(false)
      }
    }
  }
};
// const tbData = ref<AuthorityVo[]>([]);
// const authorityDrawer = ref<any>()
// const { loading, setLoading } = useLoading();
// const refresh = async () => {
//   setLoading(true)
//   tbData.value = (await treeList()).data
//   setLoading(false)
// }
// const onCreate = async () => {
//   setLoading(true)
//   await authorityDrawer.value.createHandle()
//   setLoading(false)
// }
//
// const onPreview = async (id: number) => {
//   setLoading(true)
//   await authorityDrawer.value.previewHandle(id)
//   setLoading(false)
// }
//
// const onUpdate = async (id: number) => {
//   setLoading(true)
//   await authorityDrawer.value.updateHandle(id)
//   setLoading(false)
// }
//
// const onDelete = async (id: number) => {
//   setLoading(true)
//   try {
//     await deleteById(id)
//   } finally {
//     await refresh()
//     setLoading(false)
//   }
// }
//
// onMounted(() => {
//   refresh()
// })
</script>

<style scoped>

</style>
